<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            主要在于复制出来的新对象和原来的对象是否会互相影响，改一个，另一个也会变
                浅拷贝:仅仅是指向被复制的内存地址，如果原地址发生改变，那么浅拷贝出来的对象也会相应的改变
                深拷贝:在内存中开辟一块新的地址用于存放复制的对象

            浅拷贝新旧对象会共享内存，修改一个，另一个也跟着受到影响
            深拷贝新旧对象不会共享内存，修改一个不会影响到另一个
        */

        // 如果你没了解过这些知识，你可能会奇怪，明明我改的是obj的name，为什么obj2也跟着变了？
        let obj1 = { name: 'mikaisa' };
        let obj2 = obj1;
        obj1.name = 'mika';
        console.log(obj1.name, obj2.name);//mika
        console.log(obj1 === obj2);//true

        // 除此之外，Object.assign()方法也是一个浅拷贝
        let obj3 = { name: 'mikaisasss' };
        let obj4 = Object.assign(obj3);
        obj3.name = 'mika';
        console.log(obj3,obj4);

        // 那么怎么实现深拷贝呢？
        // 有个最简单的方法，使用JSON.stringfy()和JSON.parse()
        /*
            JSON.stringfy()将js的值(数组或对象)转为一个JSON字符串
            JSON.parse()用来解析JSON字符串，转换为js对象或数组
        */ 
        let obj5 = {name:'obj5'};
        let obj6 = JSON.parse(JSON.stringify(obj5));
        obj5.name = 'zzz';
        console.log(obj5,obj6);

        // 通过扩展运算符可以实现深拷贝，但是仅限于只有一层的对象，如果有嵌套那就不行了
        let obj7 = {name:'obj7'};
        let obj8 = {...obj7};
        obj7.name = 'obj77777';
        console.log(obj7,obj8);

        function deepCopy(obj) {
            let newObj = null;
            if (Array.isArray(obj)) {
                newObj = [];
            }
            else if (typeof obj == "object") {
                newObj = {};
            }
            else {
                return obj;
            }
            for (let item in obj) {
                newObj[item] = deepCopy(obj[item]);
            }
            return newObj;
        }
    </script>
</body>

</html>